<template>
  <container title="品牌列表">
    <div class="main-card">
      <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
        <template v-slot:left>
          <el-input placeholder="品牌名称" class="short" v-model="keyword" clearable size="small"
                    style="margin-right:10px;width:260px;"></el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="loadDataList(1)">查询
          </el-button>
        </template>
        <template v-slot:right>
          <el-button size="small" icon="el-icon-plus" circle @click.stop="$refs.form.show()"></el-button>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>

      <div class="data-container">
        <tbc-dynamic-table
            v-loading="loading"
            :data="dataList"
            :cols="[
              {label: 'logo', prop: 'brand_logo', type: 'image', width: 100},
              {label: '名称', prop: 'brand_name', minWidth: 200},
              {label: '首字母', prop: 'first_letter', width: 200, align: 'center'},
              {label: '排序', prop: 'sort_weight', width: 200, align: 'center'},
              {label: '状态/时间', prop: 'status', width: 200},
              {label: '操作', type: 'action', width: 100, fixed: 'right',
                  click: onButtonClick ,button: [
                  {label: '编辑', type: 'text', code: 'edit'},
                  {label: '删除', type: 'text', code: 'delete'},
              ]}]">
          <template v-slot:brand_name="scope">
            <p>{{ scope.row.brand_id }}</p>
            <p>{{ scope.row.brand_name }}</p>
          </template>
          <template v-slot:status="scope">
            <p class="tbc-hover">
              <el-tag size="mini" effect="dark" type="success" v-if="scope.row.status === 1">正常</el-tag>
              <el-tag size="mini" effect="dark" type="danger" v-if="scope.row.status === 2">禁用</el-tag>
            </p>
            <p>{{ scope.row.create_time }}</p>
          </template>
        </tbc-dynamic-table>

      </div>
      <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
    </div>
  </container>

  <goods-brand-form ref="form" @success="loadDataList"/>
</template>
<script lang="ts">

import {defineComponent, ref, onMounted, defineAsyncComponent, Ref} from 'vue'
import useGoodsBrand from './api/goodsBrand'


export default defineComponent({

  name: 'goods-brand',

  components: {

    GoodsBrandForm: defineAsyncComponent(() =>
        import('./GoodsBrandForm.vue'))
  },

  setup() {
    const brand = useGoodsBrand()
    const form: Ref = ref(null)

    const onButtonClick = (data: { [k: string]: string, brand_id: string }, action: string) => {
      if (action === 'edit') {
        return form.value.show(data)
      }
      if (action === 'delete') brand.deleteDataItem(data)
    }

    onMounted(() => {
      brand.loadDataList(1)
    })

    return {
      ...brand,
      form,
      onButtonClick
    }
  }
})
</script>